<template>
  <div>
    <h3>会议室管理</h3>
    <input type="text" v-model="txt"><input type="button" @click="add" value="添加">
    <ul>
      <TransitionGroup name="abc">
        <li v-for="item in data" :key="item.id">{{ item.title }} - <input type="button" value="删除" @click="del(item.id)"></li>
      </TransitionGroup>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const data = reactive([{
  id:0,
  title:"张三"
},{
  id:1,
  title:"李四"
},{
  id:2,
  title:"王二"
},]);

const txt = ref("");

function add(){
  data.push({
    id:Date.now(),
    title: txt.value
  })
}
function del(id){
  let i=0;
  data.some((val,idx)=>{
    i = idx;
    return val.id === id;
  })
  data.splice(i, 1);
}
</script>

<style>

.abc-enter-from{
  transform: translate(20px);
  opacity: 0;
}
.abc-enter-active{
  transition: all 0.5s;
}
.abc-enter-to{
  transform: translate(0);
  opacity: 1;
}

.abc-leave-from{
  transform: translate(0);
  opacity: 1;
}
.abc-leave-active{
  transition: all 0.5s;
}
.abc-leave-to{
  transform: translate(-20px);
  opacity: 0;
}
</style>